<template>
  <div class="preson">
    姓：<input type="text" v-model="firstName" />
    <br />
    名：<input type="text" v-model="lastName" />
    <br />
    <span>{{fullName}}</span>
    <br>
    <button @click="changeName">修改全名</button>
  </div>
</template>

<script setup lang="ts" name="Preson">
  import { ref, computed } from "vue";
  // 数据
  let firstName = ref(''),lastName = ref('');
  // 方法
  /* // 只读的计算属性
  let fullName = computed(()=>{
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + lastName.value
  }) */
  
  // 响应式计算属性
  let fullName = computed({
    get(){
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + lastName.value
    },
    set(val){
      const [str1,str2] = val.split('-')
      firstName.value = str1
      lastName.value = str2
    }
  })
  function changeName(){
    fullName.value = 'li-si'
  }
</script>
<style scoped>
  .preson {
    background-color: skyblue;
    box-shadow: 0 0 10px 0;
    padding: 10px;
    border-radius: 10px;
  }
</style>
